<template>
  <div class="ddetail">
    <div class="shang">
      <div class="top">
        <van-icon name="cross"  @click="fanhui" class="ic1"/>
        <span>订单详情</span>
        <van-icon name="user-o" class="ic2"/>
      </div>
      <div class="mid">
        <h3>待付款</h3>
        <p>请在<span>4分45秒</span>内完成付款，过时订单将会取消</p>
        <div class="kuang">
          <div class="quxiao">
            <span>取消订单</span>
          </div>
          <div class="zhifu">
            <span>去支付</span>
          </div>
        </div>
      </div>
    </div>

    <div class="zhongjian">
      <div class="xinxi">
        <div class="ding">
          <p>订单信息</p>
        </div>
        <div class="coff" v-for="item in list" :key="item.id">
          <div class="coffl">
            <h6>{{item.product.name}}</h6>
            <span>{{item.product.descriptions}}</span>
          </div>
          <p class="p1">x{{item.quantity}}</p>
          <p class="p2">¥{{item.product.price}}</p>
        </div>
      </div>

    </div>

    <div class="foot">
      <div class="ps" >
        <p>共1件商品</p>
        <p>实付￥{{price}}</p>
      </div>
      <div class="shou">
        <div class="s1">收货地址</div>
        <div class="s2">
          <p>地址:{{lists.regions+lists.address}}</p>
          <p>{{lists.receiver}}:{{lists.no}}</p>
        </div>
      </div>

      <div class="tu">
        <img src="http://www.sunlulu.club/img/mfh.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { getidorders } from '../api/order'
export default {
  data() {
    return {
      id: '',
      list:[],
      lists:{},
      price:0
    }
  },
  async created() {
    this.id= this.$route.query.id;
    // console.log(this.id);
    const res = await getidorders(this.id)
    console.log(res)
    this.lists = res.data.order;
    this.list = res.data.details;
    for(let i=0;i<=res.data.details.length;i++){
      this.price += res.data.details[i].price
    }

  },
  methods: {
    fanhui() {
      this.$router.push({name:'dingDan'});
    }
  }

}
</script>

<style scoped>
.ddetail{
  width: 100%;
  background: ghostwhite;
  display: flex;
  flex-direction: column;
}
.shang{
  height: 197px;
}
.top{
  display: flex;
  height: 30px;
  justify-content: space-between;
  padding: 10px;
  line-height: 30px;
  border-bottom: solid 1px gainsboro;
  background: white;
}
.ic1{
  margin-top: 8px;
  font-size: 20px;
}
.ic2{
  margin-top: 8px;
  font-size: 20px;
}
.mid{
  height: 145px;
  border-bottom:solid 1px gainsboro;
  overflow: hidden;
  background: white;
}
.mid h3{
  text-align: center;
  margin: 0;
  margin-top: 14px;
  font-size: 20px;
}
.mid p{
  text-align: center;
  font-size: 14px;
}
.kuang{
  display: flex;
  margin-left: 60px;
  margin-top: 10px;
  height: 60px;
}
.quxiao{
  width: 105px;
  height: 32px;
  border: solid 1px gainsboro;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
}
.zhifu{
  width: 105px;
  height: 32px;
  border: solid 1px orange;
  text-align: center;
  line-height: 32px;
  margin-left: 35px;
  font-size: 14px;
}
.xinxi{
  height: 100px;
  background: white;
}
.ding{
  height: 25px;
  padding: 10px 16px 0px;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px gainsboro;
}
.ding p:nth-child(2){
  color: red;
}
.ding p{
  margin: 0px;
  font-size: 14px;
}
.coff p{
  margin: 0;
  font-size: 14px;
}
.coffl span{
  font-size: 12px;
  color: gray;
}
.coffl h6{
  font-size: 16px;
  margin: 0;
}
.coff{
  display: flex;
  justify-content: space-between;
  height: 66px;
  padding: 0 16px;
  border-bottom: solid 1px gainsboro;
  background: white;
}
.coff .p1,.coff .p2{
  line-height: 60px;
}
.coff .p1{
  color: gray;
}
.coff .coffl{
  margin-top: 6px;
}
.ps{
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  background: white;
  border-bottom: solid 1px gainsboro;
}
.ps p{
  margin: 10px 0;
}
.zhongjian{
  flex: 1;
}
.shou{
  height: 70px;
  background: white;
  display: flex;
  padding: 13px 15px;
  justify-content: space-between;
  border-bottom: solid 1px gainsboro;
}
.s2 p{
  margin: 5px;
  color: gray;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.s1{
  width: 70px;
}
.s2{
  width: 250px;
}
.tu img{
  width: 100%;
  display: block;
}
.foot{
  height: 200px;
  padding-bottom: 10px;
}
</style>
